<template>
    <div class="userInfo-root">
        <div class="border">

            <!-- 更新公告 -->
            <myNotice :backPath="backImage"></myNotice>
            <!-- 格子布局 -->
            <myPlaid :backPath="backImage" @updateConfig="updateConfig"></myPlaid>

        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useUserStores } from "@/stores/index.js";
import myPlaid from './plaid/index.vue'
import myNotice from './notice/index.vue'


const userStores = useUserStores();
let config = userStores.getConfigAction();
const backImage = 'url("' + config.backImage + '")';




//更新配置文件
const updateConfig = (e) => {
    userStores.UpdateConfigAsyncAction().then(res => {
        config = res;
        messageBox.show({
            color: 'green',
            text: 'Config Update OK!'
        })
    }).catch(res => {
        messageBox.show({
            color: 'red',
            text: 'Config Update Error!'
        })
    })
}



</script>

<style scoped lang="scss">
.userInfo-root {
    background-image: v-bind(backImage);
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;

    .border {
        width: 100%;
        height: calc(100% - 10px);
        backdrop-filter: blur(10px);
        padding-top: 10px;
    }
}
</style>